<template>
    <div>
        <!--        头部-->
        <div class="bike-head">
            <div class="bike-name">自行车租赁平台</div>
            <div class="bike-search">
                <input type="text" placeholder="请输入关键词">
                <div class="search-button">搜索</div>
            </div>
            <div class="user-info">
                <div @click="login">登录/注册</div>
                <div>
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

    export default {
        name: "userHeader",
        data() {
            return {}
        },
        mounted(){
            // eslint-disable-next-line no-console
          console.log(this.$router.path)
        },
        methods: {
            login() {
                this.$router.push({path: "/login"})
            }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
    .bike-head {
        height 90px
        display flex
        justify-content space-around
        align-items center
        /*background-color skyblue*/

        .bike-name {
            font-size 18px
        }

        .bike-search {
            position relative
            width 25%
            height 40px

            input {
                width: 100%
                height 100%
                border-radius 20px
                border 1px solid #ccc
                padding-left 15px
            }

            .search-button {
                position absolute
                right 0
                top 50%
                width 20%
                height: 100%
                line-height 40px
                text-align center
                color #fff
                border-top-right-radius 20px
                border-bottom-right-radius 20px
                background-color #49AF4F
                transform translateY(-50%)
            }
        }

        .user-info {
            display flex
            justify-content center
            align-items center
            font-size 15px
            cursor pointer

            .el-avatar--circle {
                width: 35px
                height: 35px
                vertical-align middle
                cursor pointer

            }

            div {
                padding-left 10px
            }
        }


    }


</style>
